<template>
    <div id="preloader_2">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</template>

<script>
    export default {
        name: "MLoding2"
    }
</script>

<style scoped>

    #preloader_2{
        position: relative;
        left: 50%;
        width: 40px;
        height: 40px;
    }
    #preloader_2 span{
        display:block;
        bottom:0px;
        width: 20px;
        height: 20px;
        background:#9b59b6;
        position:absolute;
    }
    #preloader_2 span:nth-child(1){
        -webkit-animation: preloader_2_1 1.5s infinite ease-in-out;
        -moz-animation: preloader_2_1 1.5s infinite ease-in-out;
        -ms-animation: preloader_2_1 1.5s infinite ease-in-out;
        animation: preloader_2_1 1.5s infinite ease-in-out;
    }
    #preloader_2 span:nth-child(2){
        left:20px;
        -webkit-animation: preloader_2_2 1.5s infinite ease-in-out;
        -moz-animation: preloader_2_2 1.5s infinite ease-in-out;
        -ms-animation: preloader_2_2 1.5s infinite ease-in-out;
        animation: preloader_2_2 1.5s infinite ease-in-out;

    }
    #preloader_2 span:nth-child(3){
        top:0px;
        -webkit-animation: preloader_2_3 1.5s infinite ease-in-out;
        -moz-animation: preloader_2_3 1.5s infinite ease-in-out;
        -ms-animation: preloader_2_3 1.5s infinite ease-in-out;
        animation: preloader_2_3 1.5s infinite ease-in-out;
    }
    #preloader_2 span:nth-child(4){
        top:0px;
        left:20px;
        -webkit-animation: preloader_2_4 1.5s infinite ease-in-out;
        -moz-animation: preloader_2_4 1.5s infinite ease-in-out;
        -ms-animation: preloader_2_4 1.5s infinite ease-in-out;
        animation: preloader_2_4 1.5s infinite ease-in-out;
    }

    @-webkit-keyframes preloader_2_1 {
        0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
        50% {-webkit-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
        80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
        100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-webkit-keyframes preloader_2_2 {
        0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
        50% {-webkit-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
        80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
        100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-webkit-keyframes preloader_2_3 {
        0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
        50% {-webkit-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
        80% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
        100% {-webkit-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }


    @-webkit-keyframes preloader_2_4 {
        0% {-webkit-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
        50% {-webkit-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
        80% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
        100% {-webkit-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-moz-keyframes preloader_2_1 {
        0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
        50% {-moz-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
        80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
        100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-moz-keyframes preloader_2_2 {
        0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
        50% {-moz-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
        80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
        100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-moz-keyframes preloader_2_3 {
        0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
        50% {-moz-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
        80% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
        100% {-moz-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-moz-keyframes preloader_2_4 {
        0% {-moz-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
        50% {-moz-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
        80% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
        100% {-moz-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-ms-keyframes preloader_2_1 {
        0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
        50% {-ms-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
        80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
        100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-ms-keyframes preloader_2_2 {
        0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
        50% {-ms-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
        80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
        100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-ms-keyframes preloader_2_3 {
        0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
        50% {-ms-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
        80% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
        100% {-ms-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-ms-keyframes preloader_2_4 {
        0% {-ms-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
        50% {-ms-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
        80% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
        100% {-ms-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-keyframes preloader_2_1 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }
    @-keyframes preloader_2_2 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }
    @-keyframes preloader_2_3 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg);border-radius:0px;}
    50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;}
    80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;}
    100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;}
    }


    @-keyframes preloader_2_4 {
    0% {-transform: translateX(0px) translateY(0px)  rotate(0deg); border-radius:0px;}
    50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;}
    80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;}
    100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;}
    }

</style>
